<template lang="pug">
div
  div(style='margin-bottom: 20px')
    span(style='margin-right: 10px') 回复组成员可以对问题进行作答
    Button(type='success', size='small', @click='showAddMember = true') 添加回复成员
  Table(:columns='cols', :data='members')
  Modal.custom-modal(
    title='添加回复成员',
    v-model='showAddMember',
    :width=600,
    :loading='true'
    @on-ok='addMember'
    )
    div.modal-content
      UserAutocomplete(@select='onSelectUser', v-model='newUser', v-if='canAddMember')
      h3(v-if='!canAddMember') 基础版只能添加一位回复成员。添加多位回复成员，请#[router-link(to='/upgrade') 升级至标准版]
</template>

<script>
import { mapState } from 'vuex'
import Api from '@/apis'
import store from '@/store'
import UserAutocomplete from '@/components/UserAutocomplete'

export default {
  beforeRouteEnter (to, from, next) {
    Api.Group.getGroupMemberList(store.state.app.id).then(data => {
      next(vm => {
        vm.members = data.data
      })
    })
  },
  components: {
    UserAutocomplete
  },
  data () {
    return {
      checked: false,
      showAddMember: false,
      newUser: {},
      cols: [
        {
          title: '名称',
          key: 'name',
          render: (h, params) => {
            return h('div', [
              h('Avatar', {
                class: {
                  'va-middle': true
                },
                props: {
                  src: params.row.avatar,
                  icon: 'person',
                  shape: 'square',
                  size: 'small'
                }
              }),
              h('span', {
                class: {
                  'va-middle': true
                },
                style: {
                  marginLeft: '5px'
                }
              }, params.row.name)
            ])
          }
        },
        // { title: '角色', key: 'role' },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '编辑信息'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.removeMember(params.index)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      members: []
    }
  },
  computed: {
    canAddMember () {
      if (this.appInfo.type === 'basic' && this.members.length >= 1) {
        return false
      }
      return true
    },
    ...mapState({
      appId: state => state.app.id,
      appInfo: state => state.app.info
    })
  },
  methods: {
    show (idx) {
      console.log(this.members[idx])
      this.$router.push({
        name: 'edit-member',
        params: { id: this.members[idx].id }
      })
    },
    onSelectUser (val) {
      this.user = val
    },
    addMember () {
      if (!this.canAddMember) {
        // this.$Message.error('只能添加一位运营')
        this.showAddMember = false
        return
      }
      Api.Group.addMembership(this.appId, this.newUser.id)
        .then(member => {
          this.showAddMember = false
          // location.reload()
          this.members.push(member)
          this.$Message.success('添加成功')
        })
        .catch(e => {
          if (e.response.data.message) {
            this.$Message.error(e.response.data.message)
            this.showAddMember = false
          }
        })
    },
    removeMember (idx) {
      const user = this.members[idx]
      this.$Modal.confirm({
        title: '删除以下成员吗？',
        loading: true,
        render: h => {
          return h('div', {
            style: { paddingTop: '20px' }
          }, [
            h('Avatar', {
              class: { 'va-middle': true },
              props: {
                src: user.avatar,
                icon: 'person',
                shape: 'square',
                size: 'large'
              }
            }),
            h('span', {
              class: { 'va-middle': true },
              style: {
                fontSize: '16px',
                marginLeft: '5px'
              }
            }, user.name)
          ])
        },
        okText: '删除',
        onOk: () => {
          Api.Group.removeMembership(this.appId, this.members[idx].user.id)
            .then(() => {
              this.$Message.success('删除成员成功')
              this.$Modal.remove()
              this.members.splice(idx, 1)
            })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.modal-content {
  padding: 60px;
}
</style>
